<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="6">
        <el-card style="color: #409eff">
          <div><i class="el-icon-user-solid" />交警用户总数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ users }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #f56c6c">
          <div><i class="el-icon-money" />北京地区交通案件结案数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ open }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67c23a">
          <div><i class="el-icon-bank-card" />北京地区交通案未结案数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ closed }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #409eff">
          <div style="color: #409eff">
            <i class="el-icon-s-shop" />北京地区交通案件总数
          </div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ open + closed }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="pie" style="width: 1300px; height: 500px"></div>
      </el-col>
      <!-- <el-col :span="12">
        <div id="main" style="width: 600px; height: 480px"></div>
      </el-col> -->
    </el-row>
  </div>
</template>
<script>
import { Progress } from "@/api/api";
import * as echarts from "echarts";
export default {
  name: "Home",
  data() {
    return {
      total: 0, // 初始值
      users: 0,
      open: 0,
      closed: 0,
    };
  },
  async mounted() {
    //使用mounted的目的是为了等页面元素渲染之后再触发
    var pieChart = echarts.init(document.getElementById("pie"));
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      title: {
        text: "未结案数 vs 结案数",
        // subtext: "Fake Data",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["未结案数", "结案数"],
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          // prettier-ignore
          // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          data: ['2023年6月','2023年7月', '2023年8月', '2023年9月', '2023年10月', '2023年11月', '2023年12月', '2024年1月', '2024年2月', '2024年3月', '2024年4月', '2024年5月', '2024年6月'],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "未结案数",
          type: "bar",
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
          label: {
            show: true, // 显示数据标签
            position: "top", // 标签位置
            formatter: "{c}", // 标签内容格式器，{c} 表示数据值
          },
          markPoint: {
            data: [
              { type: "max", name: "Max" },
              { type: "min", name: "Min" },
            ],
          },
          // markLine: {
          //   data: [{ type: 'average', name: 'Avg' }]
          // }
        },
        {
          name: "结案数",
          type: "bar",
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
          label: {
            show: true, // 显示数据标签
            position: "top", // 标签位置
            formatter: "{c}", // 标签内容格式器，{c} 表示数据值
          },
          markPoint: {
            data: [
              { type: "max", name: "Max" },
              { type: "min", name: "Min" },
              // { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
              // { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
            ],
          },
        },
      ],
    };
    
    const res = await Progress();
    //对 方块中的数据进行赋值
    this.users = res.data.users;
    this.open = res.data.open;
    this.closed = res.data.close;

    console.log(res.data.char1);
    // // this.data = res.data;
    // let chardata = charOption.dataset.source;
    // for (let i = 0; i < res.data.char1.length; i++) {
    //   let temp = chardata[i + 1];
    //   temp[1] = res.data.char1[i]; // 对要显示的数据 charOption.dataset.source 中的 第 2列的数据进行赋值
    //   console.log(temp[1]);
    // }
    // myChart.setOption(charOption);

    let piedata = option.series;
    console.log(res.data.char2);
    let char2data = res.data.char2;
    for (let i = char2data.length - 1; i >= 0; i--) {
      // console.log(char2data[i].closedIncident);
      piedata[0].data[i] = char2data[i].openIncident; // 未结案数据
      piedata[1].data[i] = char2data[i].closedIncident; // 结案数据
      option.xAxis[0].data[i] = char2data[i].month;
    }

    // option.xAxis.data = res.data.char2.month;
    // option.series[0].data = res.data.char2.closedIncident;
    // option.series[1].data = res.data.char2.openIncident;
    // for (let i = 0; i < res.data.char2.length; i++) {
    //   let temp = piedata[0].data[i];
    //   temp = res.data.char2[i];
    //   let temp2 = piedata[1].data[i];
    //   temp2 = res.data.char2[i];
    // }
    pieChart.setOption(option);
  },
};
</script>
<style scoped>
/* 在 Vue.js 中，<style scoped> 是一个特殊的语法，用于限制样式的作用范围，确保样式仅对当前组件生效，而不会影响到其他组件或全局样式。 */
/* 当你在 Vue 组件中使用 <style scoped> 时，Vue 会自动为该组件的 HTML 元素添加一个唯一的属性（如 data-v-f3f3eg9），并在 CSS 选择器中添加这个属性，以确保样式只应用到该组件的根元素及其子元素上。 */
</style>
